<template>
<view class="message_detail-main page-view">
	<view class="message-container">
		<view class="pet-consult-wrap" v-if="isCommonMessage">
			<view class="info">
				<image class="head-picture" src="@/static/images/a.jpg"></image>
				<view class="right">
					<view class="name">狗大娃</view>
					<view class="sympton">咨询：天天半夜叫，又腹泻，乱拉屎，怎么回事呢？</view>
				</view>
			</view>
			<view class="detail">
				<view>爱宠: 可可西里</view>
				<view>接待: 王小二</view>
				<view>顾问: 王医生</view>
			</view>
			<view class="order-num">咨询编号：2323232332</view>
			<view class="conclusion">
				<view>顾问结论:</view>
				<view>风寒性感冒与不洁食物共同作用导致的拉稀 ，忌食生冷食物，多保暖，辅助以XX药，一天三次，每次两片。</view>
			</view>
		</view>
		<view class="message-item" v-if="isCommonMessage">
			<view class="date-time">11月17日 12:53</view>
			<view class="tips">你好，王医生为你服务</view>
		</view>
		<view class="message-item" v-for="(item, index) in 5">
			<view class="date-time" v-if="false">11月17日 12:53</view>
			<view :class="['message-item-wrap', index % 2 == 1 ? 'self-message' : 'ohter-message']"  v-if="isCommonMessage">
				<image class="head-picture" src="@/static/images/a.jpg"></image>
				<view class="content" v-if="index != 3">
					<view class="user-message">
						腹部受凉 在换季的时候狗狗很容易因为腹部受凉而拉肚子,这种情况一般问题不大,只要狗狗的精神食欲正常,慢慢就可自行恢复。
					</view>
				</view>
				<image class="image-content" v-else-if="index == 3" 
				src="@/static/images/a.jpg" mode="aspectFill"></image>
			</view>
			<view class="message-item-wrap ohter-message" v-else>
				<image class="head-picture" src="@/static/images/a.jpg"></image>
				<view class="content">
					<view class="system-message">
						<view class="detail">
							编号为 <text class="order-num">240520113645abc</text> 的咨询已经结束，本次咨询总共耗时78小时，请您对本次的服务进行评价，您的反馈对我们很重要。
						</view>
						<view class="push-comment">
							<text>点击评价本次咨询 ></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="bottom-wrap">
		<view class="send-container" v-if="isCommonMessage">
			<image class="add-btn" src="@/static/images/icon/add-circle.png"></image>
			<view class="input-wrap">
				<textarea :auto-height="autoHeight" class="message-input" placeholder="请输入内容"
				@linechange="onLineChange"></textarea>
				<view class="send-btn btn">
					<text>发送</text>
					<image src="@/static/images/icon/send.png"></image>
				</view>
			</view>
		</view>
		<view class="consult-finish" v-else>
			咨询结束
		</view>
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			// 是否普通消息
			isCommonMessage: false,
			autoHeight: true,
			// 消息列表
			list: [{
				
			}]
		};
	},
	onLoad (params) {
		this.isCommonMessage = parseInt(params.type) !== 0
		
		uni.setNavigationBarTitle({
			title: parseInt(params.type) === 0 ? "系统通知" : "信息详情"
		})
	},
	methods: {
		// 消息输入行数变化时
		onLineChange (e) {
			let { lineCount } = e.detail
			
			this.autoHeight = lineCount < 2
		}
	}
}
</script>

<style lang="less">
.message_detail-main {
	display: flex;
	flex-direction: column;
	
	.message-container {
		flex: 1;
		height: 0;
		overflow-y: auto;
		background: #F8F8F8;
		padding: 30rpx 20rpx;
		
		.pet-consult-wrap {
			padding: 30rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			
			.info {
				display: flex;
				
				.head-picture {
					flex-shrink: 0;
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
				}
				
				.right {
					padding-top: 6rpx;
					flex: 1;
					margin-left: 20rpx;
					color: rgba(0, 0, 0, 0.8);
					
					.name {
						font-size: 34rpx;
					}
					
					.sympton {
						font-size: 28rpx;
						line-height: 38rpx;
					}
				}
			}
			
			.detail, .order-num {
				display: flex;
				font-size: 28rpx;
				color: rgba(158, 158, 158, 0.8);
				
				>view {
					flex: 1;
				}
			}
			
			.detail {
				margin-top: 25rpx;
			}
			
			.order-num {
				margin-top: 15rpx;
			}
			
			.conclusion {
				display: flex;
				font-size: 28rpx;
				font-weight: normal;
				line-height: 34rpx;;
				color: #A1A1A1;
				padding-top: 18rpx;
				border-top: 1rpx dashed #D8D8D8;
				margin-top: 25rpx;
				
				>view {
					&:nth-child(1) {
						flex-shrink: 0;
					}
					
					&:nth-child(2) {
						flex: 1;
						margin-left: 20rpx;
					}
				}
			}
		}
		
		.message-item {
			.date-time {
				margin-top: 30rpx;
				font-size: 24rpx;
				text-align: center;
				color: rgba(0, 0, 0, 0.3);
			}
			
			.tips {
				padding-left: 20rpx;
				font-size: 28rpx;
				color: rgba(158, 158, 158, 0.8);
				margin-top: 30rpx;
				line-height: 48rpx;
			}
			
			.message-item-wrap {
				display: flex;
				margin-top: 30rpx;
				
				.head-picture {
					flex-shrink: 0;
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
				}
				
				.content {
					font-size: 28rpx;
					line-height: 48rpx;
					padding: 20rpx;
					
					.system-message {
						.order-num {
							color: #FF6D03;
						}
						
						.push-comment {
							margin-top: 50rpx;
							margin-bottom: 20rpx;
							text-align: center;
							font-size: 28rpx;
							color: #FF6D03;
						}
					}
				}
				
				.image-content {
					width: 248rpx;
					height: 248rpx;
					border-radius: 10rpx;
				}
			}
			
			
			.self-message {
				flex-direction: row-reverse;
				.head-picture {
					margin-left: 18rpx;
				}
				
				.content {
					border-radius: 18rpx 0rpx 18rpx 18rpx;
					background: #FF6D03;
					color: #FFFFFF;
				}
			}
			
			.ohter-message {
				.head-picture {
					margin-right: 18rpx;
				}
				
				.content {
					border-radius: 0px 18rpx 18rpx 18rpx;
					background: #FFFFFF;
				}
			}
		}
	}
	
	.bottom-wrap {
		padding: 25rpx 30rpx;
		background: #FFFFFF;
		
		.send-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.add-btn {
				width: 52rpx;
				height: 52rpx;
			}
			
			.input-wrap {
				display: flex;
				align-items: center;
				width: 632rpx;
				height: 96rpx;
				border: 1rpx solid #DFDFDF;
				border-radius: 12rpx;
				padding: 0 18rpx;
				margin-left: 14rpx;
				
				.message-input {
					font-size: 24rpx;
					height: 80%;
				}
				
				.send-btn {
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 122rpx;
					height: 64rpx;
					border-radius: 8rpx;
					background: #FF6D03;
					gap: 10rpx;
					flex-shrink: 0;
					
					>text {
						line-height: 1;
						font-size: 24rpx;
						color: #FFFFFF;
					}
					
					>image {
						margin-left: 10rpx;
						width: 25rpx;
						height: 22rpx;
					}
				}
			}
		}
		
		.consult-finish {
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			height: 110rpx;
			background: #DCDCDC;
			font-size: 32rpx;
			color: #FFFFFF;
			border-radius: 12rpx;
		}
	}
}
</style>
